<template>
	<view class="businessSchool">
		<skeletons :loading="bannerFun.loading" :rowsHeight="['422rpx']">
			<view class="dots" v-if="bannerFun.list.length != 0">
				<swiper class="home-swiper-box" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" @change="bannerFun.change">
					<swiper-item v-for="(item, index) in bannerFun.list" :key="`list-${index}`">
						<image @click="bannerFun.toPages(item)" class="item-img-box" :src="item.pic" mode=""></image>
					</swiper-item>
				</swiper>
				<view class="dots-content">
					<view :class="['dots-item', bannerFun.current == index ? 'dots-item-active' : '']" v-for="(item, index) in bannerFun.list" :key="`lists-${index}`"></view>
				</view>
				<view class="dots_share">
					<view class="dots_share_box">
						<image @click="shareApp" :src="iconUrl + '88.png'" mode=""></image>
						分享
						<!-- #ifdef MP-WEIXIN -->
						<button class="share" open-type="share">分享</button>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</skeletons>
		<view class="historical_records" v-if="recentLearning.list.length > 0">
			<view class="historical_records_title">
				<view class="historical_records_title_text">最近学习</view>
				<view class="historical_records_title_btn" @tap="goStudyRecord">
					查看全部
					<uni-icons type="right" color="#7C807F" :size="16"></uni-icons>
				</view>
			</view>
			<view class="historical_records_list">
				<view class="historical_records_course" v-for="(histItem, histIndex) in recentLearning.list" :key="histIndex" @tap="goCourseDetails(histItem.courseId)">
					<view class="historical_records_course_img">
						<image :src="histItem.courseCover" mode=""></image>
						<view class="historical_records_study_progress">
							<view class="">{{ histItem.chapterName }}</view>
							<image :src="histItem.chapterWay == 1 ? `${iconUrl}150.png` : `${iconUrl}149.png`" mode=""></image>
						</view>
					</view>
					<view class="historical_records_course_name">{{ histItem.courseName }}</view>
					<view class="historical_records_study_time">{{ histItem.createTime }}</view>
				</view>
			</view>
		</view>
		<view class="course_classification">
			<view class="course_tabs">
				<scroll-view :scroll-left="0" :show-scrollbar="false" scroll-x="true" class="header_sub_nav_scroll">
					<view class="course_tabs_item_box">
						<template v-for="(courseTabItem, courseTabIndex) in courseClassList.list" :key="courseTabIndex">
							<view class="course_tabs_item" v-if="courseTabItem?.courseList?.length > 0" @tap="courseClassList.courseTab(courseTabIndex)">
								<view class="course_tabs_item_name" :class="courseTabIndex == courseClassList.indexAct ? 'course_tabs_item_name_act' : ''">
									{{ courseTabItem.name }}
								</view>
								<view class="course_tabs_item_tips" v-if="courseTabIndex == courseClassList.indexAct"></view>
							</view>
						</template>
					</view>
				</scroll-view>
			</view>
			<view class="course_content">
				<!-- courseClassList.list[courseClassList.indexAct].courseList -->
				<view
					class="course_content_list"
					v-for="(courseListItem, courseListIndex) in courseClassList?.list[courseClassList.indexAct]?.courseList"
					:key="courseListIndex"
					@tap="goCourseDetails(courseListItem.id)">
					<view class="course_content_img">
						<image :src="courseListItem.courseCover" mode=""></image>
						<view class="course_content_tips" v-if="courseListItem.examFlag">考试</view>
					</view>
					<view class="course_content_text">
						<view class="course_content_text_name">{{ courseListItem.courseName }}</view>
						<view class="course_content_text_tips">{{ courseListItem.courseBrief }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import api from "@/api";
import configs from "@/config";
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { useUserStoreToRefs } from "@/store/useUserStore";

const { userInfo } = useUserStoreToRefs();
onMounted(async () => {});

const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-");
//分享
onShareAppMessage(() => {
	let courseBrief = "";

	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ""}&text=wx&type=11`;
	return {
		title: "灰耳朵商学院",
		path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
		imageUrl: bannerFun.list[0].pic
	};
});
const shareApp = async () => {
	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ""}&text=wx&type=11`;
	const res: any = await api({
		method: "POST",
		url: `/mall/user/v2/generateWxUrlLink`,
		data: {
			path: "/pages/shareRefereeId/index",
			query: `q=${encodeURIComponent(cans)}`,
			envVersion: configs.envVersion
		}
	});
	uni.shareWithSystem({
		summary: "",
		href: res.data,
		success() {
			// 分享完成，请注意此时不一定是成功分享
		},
		fail() {
			// 分享失败
		}
	});
};
//轮播图
const bannerFun = reactive({
	list: [],
	loading: true,
	current: 0,
	change: (event) => {
		bannerFun.current = event.detail.current;
	},
	getBanner: async () => {
		const res: any = await api({
			method: "get",
			prefix: "acc",
			url: `/app_common_contents/v2/list`
		});
		bannerFun.list = res.data.businessDisplayPics || [];
		bannerFun.loading = false;
	},
	toPages: async (item) => {
		if (item.taptype == "exam") {
			uni.navigateTo({
				url: `/pages/businessSchool/examIntroduce/examIntroduce?examId=${item.tapto}`
			});
		}
		if (item.taptype == "course") {
			uni.navigateTo({
				url: `/pages/businessSchool/courseDetails/courseDetails?courseId=${item.tapto}`
			});
		}
	}
});
//最近学习
const recentLearning = reactive({
	list: [],
	getRecord: async () => {
		const res: any = await api({
			method: "get",
			url: `/mall/course/course-user-record/getRecentStudy`,
			data: {
				page: 1,
				limit: 2
			}
		});
		if (res.data) {
			recentLearning.list = res.data.records;
			console.log(recentLearning.list, "recentLearning.list");
		}
	}
});
//课程分类
const courseClassList = reactive({
	list: [],
	indexAct: 0,
	getCourseClassList: async () => {
		const res: any = await api({
			method: "get",
			url: `/mall/course/course-class/getCourseClassList`
		});
		if (res.data) {
			console.log(res.data, "res.data");
			courseClassList.list = res.data;
			console.log(courseClassList.list, "courseClassList.list");
		}
		/*  */
	},
	courseTab: async (index) => {
		courseClassList.indexAct = index;
	}
});
const goStudyRecord = () => {
	uni.navigateTo({
		url: "/pages/businessSchool/studyRecord/studyRecord"
	});
};
const goCourseDetails = (courseId) => {
	uni.navigateTo({
		url: `/pages/businessSchool/courseDetails/courseDetails?courseId=${courseId}`
	});
};
const onDataInit = () => {
	bannerFun.getBanner();
	courseClassList.getCourseClassList();
	recentLearning.getRecord();
};
defineExpose({ onDataInit });
</script>

<style lang="scss" scoped>
.businessSchool {
	width: 100%;
	background-color: #ffffff;
	padding-bottom: 188rpx;
	min-height: 100vh;
}

.dots {
	position: relative;

	.dots-content {
		position: absolute;
		left: 0;
		bottom: 32rpx;
		width: 100%;
		text-align: center;

		.dots-item-active {
			width: 32rpx !important;
			height: 8rpx !important;
			background: #ffffff !important;
			border-radius: 200rpx 200rpx 200rpx 200rpx !important;
		}

		.dots-item {
			display: inline-block;
			margin: 0 8rpx;
			width: 8rpx;
			height: 8rpx;
			background: #cccccc;
			border-radius: 50%;
			transition: all 0.5s linear;
		}
	}

	.dots_share {
		position: absolute;
		top: 0;
		right: 0;

		.dots_share_box {
			width: 132rpx;
			height: 64rpx;
			box-sizing: border-box;
			border: 2rpx solid #ffffff;
			border-radius: 200rpx 0 0 200rpx;
			background: rgba(255, 255, 255, 0.35);
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			font-size: 28rpx;
			color: #5c5e5e;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.share {
				position: absolute;
				top: 0rpx;
				right: 0;
				width: 132rpx;
				height: 64rpx;
				opacity: 0;
			}
		}
	}
}

.home-swiper-box {
	width: 750rpx;
	height: 422rpx;

	.item-img-box {
		width: 750rpx;
		height: 422rpx;
	}
}

.historical_records {
	margin: 0 auto;
	padding: 0 0 24rpx 0;
	width: 686rpx;

	.historical_records_title {
		padding: 48rpx 0 24rpx 0;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		line-height: 1;
		border-bottom: 1.9rpx solid #e4e6e6;

		.historical_records_title_text {
			font-size: 36rpx;
			color: #1b2120;
			font-weight: bold;
		}

		.historical_records_title_btn {
			font-size: 26rpx;
			color: #7c807f;
		}
	}

	.historical_records_list {
		display: flex;
		justify-content: space-between;

		.historical_records_course {
			width: 330rpx;

			.historical_records_course_img {
				margin-bottom: 32rpx;
				width: 330rpx;
				height: 186rpx;
				position: relative;
				overflow: hidden;
				border-radius: 24rpx;

				image {
					width: 330rpx;
					height: 186rpx;
					border-radius: 24rpx;
				}

				.historical_records_study_progress {
					position: absolute;
					bottom: 0rpx;
					left: 0rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 1;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
					width: 330rpx;
					height: 40rpx;
					box-sizing: border-box;
					padding: 0 16rpx;

					view {
						width: 80%;
						font-size: 20rpx;
						color: #fff;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						/* 限制显示的行数为2 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.historical_records_course_name {
				margin-bottom: 6rpx;
				font-size: 30rpx;
				color: #1b2120;
				line-height: 1.4;
				font-weight: bold;
			}

			.historical_records_study_time {
				font-size: 24rpx;
				color: #7c807f;
				line-height: 1;
			}
		}
	}
}

.course_classification {
	margin: 0 auto;
	padding-top: 48rpx;
	width: 686rpx;

	.course_tabs {
		position: sticky;
		top: 0;
		width: 686rpx;
		z-index: 9;
		background-color: #fff;

		.header_sub_nav_scroll {
			width: 100%;
			box-sizing: border-box;
			white-space: nowrap;
			//padding-right: 160rpx;

			.course_tabs_item_box {
				display: flex;

				.course_tabs_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					line-height: 1;
					margin-right: 36rpx;

					.course_tabs_item_name {
						margin-bottom: 16rpx;
						font-size: 30rpx;
						color: #5c5e5e;
					}

					.course_tabs_item_name_act {
						font-size: 40rpx;
						color: #1b2120;
						font-weight: bold;
					}

					.course_tabs_item_tips {
						width: 32rpx;
						height: 8rpx;
						background-color: #ff6084;
						border-radius: 20rpx;
					}
				}
			}
		}
	}

	.course_content {
		.course_content_list {
			margin-top: 40rpx;
			padding-bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1.9rpx solid #e4e6e6;

			.course_content_img {
				position: relative;

				image {
					width: 284rpx;
					height: 160rpx;
					border-radius: 24rpx;
				}

				.course_content_tips {
					padding: 8rpx;
					background-color: #fff;
					border: 1px solid #ff6084;
					border-radius: 8rpx;
					font-size: 22rpx;
					color: #ff6084;
					position: absolute;
					top: 16rpx;
					left: 16rpx;
				}
			}

			.course_content_text {
				padding: 8rpx 0;
				width: 386rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.course_content_text_name {
					font-size: 30rpx;
					font-weight: bold;
					line-height: 1.4;

					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 限制显示的行数为2 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.course_content_text_tips {
					font-size: 26rpx;
					color: #7c807f;
					line-height: 1.4;
					word-break: break-word;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 限制显示的行数为2 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.course_content_list:last-child {
			border: none;
		}
	}
}
</style>
